<template>
  <!-- 好友Item -->
  <view
    class="hb-relative hb-p-3 hb-bg-white hb-mb-4 hb-rounded-xl hb-flex hb-items-center hb-box-shadow-base"
    @click="handleToAiChatPage"
  >
    <view
      class="hb-w-10 hb-h-10 hb-absolute hb-right-0 hb-top-0 hb-z-10"
      @click.stop="emits('setting')"
    ></view>
    <TmImage
      class="hb-flex-shrink-0"
      :src="item.iconFileUrl"
      :width="128"
      :height="128"
      :round="4"
    />
    <view
      class="hb-justify-between hb-ml-3 hb-h-16 hb-flex hb-flex-col hb-justify-between hb-flex-1 hb-overflow-hidden"
    >
      <view class="hb-flex hb-items-center hb-justify-between">
        <TmText _class="text-overflow-1 hb-font-bold" :label="item.botName" :font-size="32" />
        <TmIcon name="ali-icon icon-shezhi1" color="#969799" :size="32" />
      </view>
      <TmText _class="text-overflow-1" color="#969799" :label="item.description" :font-size="24" />
      <scroll-view
        class="hb-w-full"
        scroll-x
        enable-passive
        enhanced
        :show-scrollbar="false"
        enable-flex
      >
        <view class="hb-flex hb-gap-2">
          <!-- 认证 -->
          <AuthenticationTag :certification-type="item.certificationType" />
          <template v-for="(v, i) in item.tags" :key="i">
            <RoleTag type="member" :text="v.label" />
          </template>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { FriendListResult } from '@/api/contact/types';

  const props = defineProps<{
    item: FriendListResult;
  }>();

  const emits = defineEmits<{
    (e: 'setting'): void;
  }>();

  const handleToAiChatPage = () => {
    navigateTo({
      name: 'aiChatPage',
      options: { uuid: props.item.uuid },
    });
  };
</script>

<style scoped></style>
